<template>
  <el-container>
    <el-header>
      <header-Component></header-Component>
    </el-header>
    <el-main>
      <item-Component></item-Component>
    </el-main>
  </el-container>
</template>

<script>
import headerComponent from "./comm/Header/Header.vue";
import itemComponent from "./components/Item/Item.vue";
export default {
  name: "App",
  components: { headerComponent, itemComponent },
};
</script>

<style lang="less" scoped>
@media screen and (prefers-color-scheme: dark) {
  .el-container {
    background-color: #202020;
    .el-header {
      background-color: #002b77;
      color: #fff;
    }
    .el-main {
      background-color: #2d2d2d;
      color: #fff;
    }
  }
}
.el-container {
  height: 100%;
}
.el-header {
  background: rgba(11, 100, 255, 100);
  padding: 0;
  width: 100vw;
  min-width: 900px;
}
.el-main {
  height: 100vh;
  padding: 0;
  min-width: 900px;
  display: flex;
  margin: 0 auto;
  box-shadow: 0px 0px 29px -9px rgba(0, 0, 0, 0.14);
  width: 60vw;
  height: calc(100vh - 5.56rem);
  flex-flow: column;
}
</style>